<template>
  <div style="color: gray">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="text item">
            <el-row>
              <el-col :span="2">
                <el-row>
                  <el-col :span="24">
                    <div style="margin-top: 70px" class="ll">
                      <span style="color: white; margin-left: 20px">相关文件</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="ll">
                      <span style="color: white; margin-left: 20px">评审汇总</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="ll">
                      <span style="color: white; margin-left: 20px">审&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;核</span>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="22">
                <el-row style="margin-top: 130px;margin-left: 20px">
                  <el-col :span="24">
                    <el-row>
                      <el-col :span="6">
                        {{ ruleForm.appendixName }}
                      </el-col>
                      <el-col :span="6">
                        <el-link @click="downloadAppendix(ruleForm.appendixUrl)">下载</el-link>
                      </el-col>
                    </el-row>
                    <hr />
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="tableData" style="width: 100%">
                      <el-table-column prop="date" label="审核人"></el-table-column>
                      <el-table-column prop="name" label="审核状态"></el-table-column>
                      <el-table-column prop="address" label="审核时间"></el-table-column>
                      <el-table-column prop="address" label="审核说明"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-row style="margin-top: 10px;margin-left: 20px">
                      <el-col :span="24">
                        <el-form-item label="评审方式：">
                          <el-radio-group v-model="inputDto.resource">
                            <el-radio label="会议评审"></el-radio>
                            <el-radio label="通讯评审"></el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <span style="color:blue">审核</span>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="结果类型：">
                          <el-select v-model="inputDto.outcome">
                            <el-option label="通过" value="true"></el-option>
                            <el-option label="退回" value="false"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <div v-show="inputDto.outcome == 'true'">
                          <el-form-item label="通过原因">
                            <el-input type="textarea" rows="5" v-model="inputDto.remark"></el-input>
                          </el-form-item>
                        </div>
                        <div v-show="inputDto.outcome == 'false'">
                          <el-form-item label="退回步骤：">
                            <el-select v-model="inputDto.orderId" placeholder="项目负责人填写">
                              <el-option label="科研人员" value="0"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="退回原因">
                            <el-input type="textarea" rows="5" v-model="inputDto.remark"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row style="text-align: center;">
                      <el-col :span="24">
                        <el-button type="primary" @click="audit()">提交</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: { id: undefined ,stepId:undefined},
  data() {
    return {
      tableData: [],
      ruleForm: [{}],
      ruleForms: [{}],
      inputDto: {
        projectId: this.$route.query.id,
        outcome: undefined,
        remark: "",
        orderId: "",
        auditStepId:this.$route.query.stepId
      }
    }
  },
  created() {
    this.detail()
  },
  methods: {
    detail() {
      let url = "/api/tb_project_apply_basicinfo/GetDetail?id=" + this.$route.query.id
      this.http.get(url, {}, true).then((res) => {
        //获取基础信息表中的数据
        this.ruleForm = res.data[0].x;
        //获取附件表中的数据
        this.ruleForms = res.data[0].z;
      })
    },
    downloadAppendix(url) {
      //打开外部浏览器地址，下载文件
      window.open(url)
    },
    //审核流程
    audit() {
      //this.inputDto.projectId = this.$route.query.id
      this.http.post('api/tb_project_workflowstep/WorkFlowStepAddTs', this.inputDto).then(
        (res) => {
          if(res.status){
                //弹出提示信息
                this.$message.success('审核结束！正在跳转页面');
                this.$router.push('/BasicPage')
            }
            else{
                this.$message.error('审核出错了！请重试！！');;
            }
        }
      )
    }
  },
}
</script>

<style>
.el-upload__tip {
  line-height: 1.2;
}

.ll {
  background-color: rgb(96, 89, 234);
  margin-left: 20px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-top: 5px;
}

.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  border-bottom: 1px solid;
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}

.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}
</style>
